body {
	overflow: hidden; /* this is important to prevent the whole page to bounce */
  width: 100vw;
  height: 100vh;
	background: #000;
	touch-action: none;
	-webkit-touch-action: none;
	-moz-touch-action: none;
	-o-touch-action: none;
	-ms-touch-action: none;
}

.index-item {
  width: 100vw;
  height: calc(100vh - 1.91rem);
}

.index-one {
	overflow: hidden;
	background: url(../img/index-bg.jpg) no-repeat #000;
  -webkit-background-size: 100% auto;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -ms-background-size: 100% auto;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 0;
}

.index-cloud {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	opacity: 0;
}

.index-wrapper {
	top: 1.88rem;
 }

.index-cloud1 {
	-webkit-animation: loop 1s linear 0s infinite alternate;
     -moz-animation: loop 1s linear 0s infinite alternate;
       -o-animation: loop 1s linear 0s infinite alternate;
          animation: loop 1s linear 0s infinite alternate;
}

.index-cloud2 {
	-webkit-animation: loop 2s linear 0.8s infinite alternate;
     -moz-animation: loop 2s linear 0.8s infinite alternate;
       -o-animation: loop 2s linear 0.8s infinite alternate;
          animation: loop 2s linear 0.8s infinite alternate;
}

.index-cloud3 {
	-webkit-animation: loop 3s linear 1.4s infinite alternate;
     -moz-animation: loop 3s linear 1.4s infinite alternate;
       -o-animation: loop 3s linear 1.4s infinite alternate;
          animation: loop 3s linear 1.4s infinite alternate;
}

@keyframes loop {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* 世界杯 start */
.index-cup-box {
	position: absolute;
	/* left: 293px;
	top: 210px;
	width: 197px;
	height: 500px; */
	left: 3.6rem;
	top: 2.8rem;
	width: 2.63rem;
	height: 6.67rem;
	transform-origin: center center;
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-o-transform-origin: center center;
	-ms-transform-origin: center center;
}

.index-cup-box-two {
	transform: scale(1.4) translateY(2.4rem);
	-webkit-transform: scale(1.4) translateY(2.4rem);
	-moz-transform: scale(1.4) translateY(2.4rem);
	-o-transform: scale(1.4) translateY(2.4rem);
	-ms-transform: scale(1.4) translateY(2.4rem);
}
/* 世界杯 end */
/* 这是 2018 最有悬念的一道题 start */
.index-title-box {
	width: 100vw;
	position: absolute;
	top: 5.33rem;
	left: 0;
}

.index-title,
.index-title-border {
	width: 100vw;
	height: 5.56rem;
}

.index-title-border {
	position: absolute;
	top: 0;
	left: 0;
}

.index-title-border {
	opacity: 0;
}
/* 这是 2018 最有悬念的一道题 end */
.index-tip1 {
	width: 100vw;
	/* position: absolute;
	top: 5.37rem;
	left: 0; */
	opacity: 0;
	margin-top: 1.29rem;
}

.index-text {
	width: 100vw;
	height: 4.13rem;
	position: absolute;
	left: 0;
	top: 5.83rem;
	opacity: 0;
}

.index-next {
	/* width: 340px;
	height: 73px;
	position: absolute;
	bottom: 100px;
	left: 50%;
	transform: translateX(-170px); */
    bottom:0.5rem;
	width: 4.53rem;
	height: 0.97rem;
	position: absolute;
	left: 50%;
	transform: translateX(-2.267rem);
	-webkit-transform: translateX(-2.267rem);
	-moz-transform: translateX(-2.267rem);
	-o-transform: translateX(-2.267rem);
	-ms-transform: translateX(-2.267rem);
	opacity: 0;
}
/* 开始页面 start */
.index-begin-no {
	width: 100%;
	display: block;
	position: absolute;
	top: 1.19rem;
	left: 0;
}

.index-begin-bg {
	width: 100vw;
	display: block;
}

.index-begin-no-one {
	-webkit-transform: translate3d(-3000px, 0, 0);
	-moz-transform: translate3d(-3000px, 0, 0);
	-o-transform: translate3d(-3000px, 0, 0);
	-ms-transform: translate3d(-3000px, 0, 0);
	transform: translate3d(-3000px, 0, 0);
}

.index-begin-line {
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.index-begin-left {
	display: block;
	position: absolute;
	left: 0;
	/* top: 160px;
	width: 211px;
	height: 670px; */
	top: 2.13rem;
	width: 2.81rem;
	height: 8.93rem;
}

.index-begin-shape5,
.index-begin-shape6 {
	position: absolute;
	/* left: 164px;
	top: 221px;
	width: 422px;
	height: 366px; */
	left: 2.19rem;
	top: 2.95rem;
	width: 5.63rem;
	height: 4.88rem;
	opacity: 0;
}

.index-begin-text1 {
	position: absolute;
	left: 0;
	top: 4.8rem;
	width: 100%;
	opacity: 0;
	/* top: 360px; */
}

.index-begin-dna {
	/* width: 223px;
	height: 82px;
	left: 260px;
	top: 400px; */
	width: 2.97rem;
	height: 1.09rem;
	left: 3.47rem;
	top: 5.33rem;
	position: absolute;
	opacity: 0;
}

.index-begin-left,
.index-begin-right {
	width: 0.84rem;
	height: 1.09rem;
	top: 5.33rem;
	position: absolute;
	opacity: 0;
}

.index-begin-left {
	left: 2.64rem;
}

.index-begin-right {
	left: 6.45rem;
}
/* .index-begin-left,
.index-begin-right {
	width: 63px;
	height: 82px;
	top: 400px;
	position: absolute;
}

.index-begin-left {
	left: 198px;
}

.index-begin-right {
	right: 484px;
} */

.index-begin-text2,
.index-begin-text3,
.index-begin-text4,
.index-begin-text5 {
	/* height: 24px; */
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
}

.index-begin-text2 {
	top: 7.59rem;
}

.index-begin-text3 {
	top: 8.25rem;
}

.index-begin-text4 {
	top: 8.91rem;
}

.index-begin-text5 {
	top: 9.57rem;
	z-index: 2;
}

.index-begin-text6 {
	/* top: 688px;
	position: absolute;
	width: 100%;
	height: 196px; */
	top: 9.17rem;
	position: absolute;
	width: 100%;
	height: 2.61rem;
}
/* .index-begin-text2 {
	top: 569px;
}

.index-begin-text3 {
	top: 619px;
}

.index-begin-text4 {
	top: 668px;
}

.index-begin-text5 {
	top: 718px;
} */

.index-begin-btn {
	/* width: 340px;
	height: 73px;
	position: absolute;
	bottom: 100px;
	left: 50%;
	transform: translateX(-170px); */
    bottom:0.5rem;
	width: 4.53rem;
	height: 0.97rem;
	position: absolute;
	left: 50%;
	transform: translateX(-2.267rem);
	-webkit-transform: translateX(-2.267rem);
	-moz-transform: translateX(-2.267rem);
	-o-transform: translateX(-2.267rem);
	-ms-transform: translateX(-2.267rem);
	opacity: 0;
}

.index-begin-fade {
	opacity: 0;
}
/* 开始页面 end */

/* 滚动 start */
.index-roll-box {
	width: 100%;
	height: 4.13rem;
	position: absolute;
	left: 0;
	top: 5rem;
	opacity: 0;
	overflow: hidden;
	text-align: center;
}

.index-roll-dark,
.index-roll-light {
	width: 6rem;
	height: 0.48rem;
	position: absolute;
	top: 50%;
	margin-top: -0.23rem;
	left: 50%;
	margin-left: -3rem;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.index-roll-mask {
	height: 0.48rem;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -0.23rem;
	overflow: hidden;
	background: url(../img/index-roll-mask.png?v=2) no-repeat;
  -webkit-background-size: 100% auto;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -ms-background-size: 100% auto;
	background-size: 100% auto;
}

.index-roll-item-dark,
.index-roll-item-light {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  color: rgba(171, 204, 255, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	height: 0.48rem;
  line-height: 0.48rem;
  font-size: 0.4rem;
}

.index-roll-item-light {
	color: rgba(171, 204, 255, 1);
}

.index-roll-item:nth-of-type(1) {
	transform: rotate3d(1, 0, 0, 0deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, 0deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, 0deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, 0deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, 0deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(2) {
	transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(3) {
	transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(4) {
	transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(5) {
	transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(6) {
	transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(7) {
	transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -120deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(8) {
	transform: rotate3d(1, 0, 0, -140deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -140deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -140deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -140deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -140deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(9) {
	transform: rotate3d(1, 0, 0, -160deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -160deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -160deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -160deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -160deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(10) {
	transform: rotate3d(1, 0, 0, -180deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -180deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -180deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -180deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -180deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(11) {
	transform: rotate3d(1, 0, 0, -200deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -200deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -200deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -200deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -200deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(12) {
	transform: rotate3d(1, 0, 0, -220deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -220deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -220deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -220deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -220deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(13) {
	transform: rotate3d(1, 0, 0, -240deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -240deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -240deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -240deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -240deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(14) {
	transform: rotate3d(1, 0, 0, -260deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -260deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -260deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -260deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -260deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(15) {
	transform: rotate3d(1, 0, 0, -280deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -280deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -280deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -280deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -280deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(16) {
	transform: rotate3d(1, 0, 0, -300deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -300deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -300deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -300deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -300deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(17) {
	transform: rotate3d(1, 0, 0, -320deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -320deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -320deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -320deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -320deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(18) {
	transform: rotate3d(1, 0, 0, -340deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -340deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -340deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -340deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -340deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(19) {
	transform: rotate3d(1, 0, 0, 00deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, 00deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, 00deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, 00deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, 00deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(20) {
	transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -20deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(21) {
	transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -40deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(22) {
	transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -60deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(23) {
	transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -80deg) translate3d(0px, 0px, 1.33rem);
}

.index-roll-item:nth-of-type(24) {
	transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
	-webkit-transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
	-o-transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
	-mos-transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
	-ms-transform: rotate3d(1, 0, 0, -100deg) translate3d(0px, 0px, 1.33rem);
}
/* 滚动 end */
